<template lang="pug">
.chartAreaDevice-wrapper
  h6.chart-title 设备数量对比
  ECharts.pie-chart(
    ref='pieChart'
    auto-resize
    :options="options"
    @click="selectPie")
  span.btn-export.iconfont.icon-export(
    title='导出'
    @click="fileEvent('/pn/dpa/stat/areaDevice/export')")
  .chart-select-wrap
    span 设备名称：
    select.chart-select(v-model="activeDevice")
      option(v-for="(item,index) in deviceList"
      :key="'select'+index"
      :value="item.value") {{item.label}}

</template>
<script>
/**
 * @name PartionInfo 设备数量分布统计
 * @author 王锐锋 <wangrf@gddxit.com>
 * @description 用于展示设备在各地区数量占比
 *参数：
 */
export default {
  props: {
    areaId: Number,
    timeRange: Array,
    selectedData: Object
  },
  data () {
    return {
      deviceList: [],
      activeDevice: '',
      options: {
        tooltip: {
          trigger: 'item',
          formatter: '{b}  ({d}%) <br/>{a}  {c}',
          textStyle: {
            fontSize: 12,
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei'
          }
        },
        legend: {
          // height: '80%',
          // width: '20%',
          type: 'scroll',
          orient: 'vertical',
          right: '5%',
          top: 40,
          bottom: 10,
          itemWidth: 14,
          itemGap: 6,
          data: []
        },
        grid: [{
          x: '5%',
          y: '20%',
          width: '38%',
          height: '60%'}],
        series: [
          {
            name: '数量',
            type: 'pie',
            center: ['38%', '50%'],
            radius: ['38%', '75%'],
            // selectedMode: 'single',
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              borderColor: '#ececec',
              borderWidth: '1',
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: []
          }
        ],
        selectPieData: {}
      }
    }
  },
  methods: {
    getDeviceOptions () {
      this.$get({
        url: '/dxbase/relation?relationList=dpaDeviceName',
        params: {
          'startTime': this.timeRange[0].getTime(),
          'endTime': this.timeRange[1].getTime()
        }
      }).then((res) => {
        this.deviceList = res.dpaDeviceName
        this.activeDevice = this.deviceList[0].value
        console.log(this.deviceList)
      })
    },
    getData () {
      this.$get({
        url: '/pn/dpa/stat/areaDevice',
        params: {
          // 'areaId': this.areaId,
          'startTime': this.timeRange[0].getTime(),
          'endTime': this.timeRange[1].getTime(),
          'deviceName': this.activeDevice
        }
      }).then((res) => {
        this.options.series[0].data = res.data.map((item) => {
          return {
            value: item.value,
            name: item.name,
            num: item.id
          }
        })
        this.options.legend.data = res.data.map(item => item.name)
        this.$nextTick(() => {
          this.highlightPie(0, this.selectedData.dataIndex)
        })
      })
    },
    selectPie (params) {
      this.$emit('selectAreaPie', params)
    },
    highlightPie (seriesIndex, dataIndex) {
      this.$refs.pieChart.dispatchAction({
        type: 'pieSelect',
        seriesIndex,
        dataIndex
      })
      this.$refs.pieChart.dispatchAction({
        type: 'showTip',
        seriesIndex,
        dataIndex
      })
    },
    fileEvent (url, filterBy) {
      this.$get({
        url,
        params: {
          'startTime': this.timeRange[0].getTime(),
          'endTime': this.timeRange[1].getTime(),
          'deviceName': this.activeDevice
        }
      }).then((res) => {
        // 生成a标签，模拟click下载files
        if (!res.data) {
          this.$alert('导出失败！')
          return
        }
        let a = document.createElement('a')
        a.href = `/api/dxbase/download/${res.data.shortUrl}`
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        event.stopPropagation()
        event.preventDefault()
      })
    }
  },
  watch: {
    activeDevice () {
      this.getData()
    }
  },
  mounted () {
    this.getDeviceOptions()
  }
}
</script>

<style lang="sass" scoped>
.chartAreaDevice-wrapper
  width: 100%
  flex-grow: 1
  display: flex
  flex-direction: column
  background-color: #fff
  position: relative
  .btn-export
    color: #a0a0a0
    font-size: 20px
    position: absolute
    right: 12px
    top: 12px
    cursor: pointer
  .chart-select-wrap
    position: absolute
    top: 36px
    right: 10px
    .chart-select
      width: 125px
      height: 25px
      border-radius: 5px
      color: #606266
      border: 1px solid #dfdfdf
  .chart-title
    text-align: center
    font-weight: bold
    font-size: 16px
    margin-top: 5px
  .pie-chart
    width: 100%
    height: 100%
    flex: 1
</style>
